<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-21 16:09:23
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-04-21 16:24:18
-->
<template>
    <VcTable ref="CustomTableRef" :columns="columns" :operation-column="operationColumn" :loading="loading"
        :data="tableData">
        <!-- 自定义操作列表插槽 -->
        <template v-slot:operations="row">
            <div class="btns">
                <el-icon @click="operationFun('edit', row)" color="#409eff">
                    <Edit />
                </el-icon>

                <el-icon @click="operationFun('del', row)" color="red">
                    <Delete />
                </el-icon>
            </div>
        </template>
    </VcTable>
</template>
  
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTableList } from '@/api/index'
import useTable, { type OperationFun } from '@/hooks/useTable'

// 操作列表配置
const operationColumn = {
    'label': '操作',
    'width': 120,
    'fixed': 'right',
}
const delFun = (row: any) => {
    const { scope: data } = row
    ElMessageBox.confirm(
        `确定删除数据${data.name}?`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            loadTableData()
        })
}
const operationFun: OperationFun = (_type, _data) => {
    switch (_type) {
        case 'del':
            delFun(_data);
            break;
        case 'edit':
            ElMessage({
                type: 'info',
                message: '你点击了修改按钮',
            })
            break;
    }
}
const columns = [
    {
        'prop': 'startDate',
        'label': '开始时间'
    },
    {
        'prop': 'endDate',
        'label': '结束时间',
    },
    {
        'prop': 'name',
        'label': '姓名',
    },
    {
        'label': '国家',
        'prop': 'city',
    },
    {
        'label': '城市',
        'prop': 'state',
    },
    {
        'label': '地址',
        'prop': 'address',
    },
    {
        'label': 'zip',
        'prop': 'zip',
    }
]
const {
    tableData,
    loading,
    loadTableData,
} = useTable({ tableApi: getTableList });
</script>

<style lang="scss" scoped>
.btns {
    .el-icon {
        margin-right: 10px;
        cursor: pointer;
    }
}
</style>